<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
      <el-form-item label="型号名称" prop="computerName">
        <el-input
          v-model.trim="queryParams.computerName"
          clearable
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button type="danger" @click="clearFilter">
          清除所有过滤器
        </el-button>
        <el-button
          class="float-right"
          type="warning"
          icon="el-icon-download"
          @click="handleExport"
        >
          导 出
        </el-button>
      </el-form-item>
      <!-- <el-button class="fr" icon="el-icon-plus" @click="handleParamsCompare">
          对比
        </el-button> -->
    </el-form>

    <el-table
      ref="tableRef"
      row-key="id"
      v-loading="loading"
      :data="brandList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        fixed
        :reserve-selection="true"
      />
      <el-table-column label="操作" align="center" width="60" fixed>
        <template slot-scope="{ row }">
          <div class="flex justify-center">
            <!-- 初审 -->
            <!-- <Tooltip
              v-if="row.state === 0"
              class="text-orange"
              icon="el-icon-coordinate"
              content="待初审"
              v-hasPermi="['config:overview:first:check']"
              @click="handleAuthChange(row, 1)"
            /> -->

            <!-- 终审 -->
            <!-- <Tooltip
              v-if="row.state === 1"
              class="text-orange"
              icon="el-icon-coordinate"
              content="待终审"
              v-hasPermi="['config:overview:final:check']"
              @click="handleAuthChange(row, 2)"
            /> -->

            <!-- <Tooltip
              class="margin-0"
              icon="el-icon-position"
              content="产品族谱"
              v-hasPermi="['product:configOverView:btn']"
              @click="
                handleNameToPage('ProductFamily', {
                  categoryId: row.categoryId,
                  computerId: row.computerId,
                })
              "
            /> -->

            <!-- 配置详情 -->
            <Tooltip
              class="margin-0"
              icon="el-icon-s-management"
              content="车型配置详情"
              @click="handleOpenDetail(row)"
            />

            <!-- 包装信息 -->
            <Tooltip
              v-show="row.packagingInfo"
              class="margin-0"
              icon="el-icon-document"
              content="包装信息"
              @click="handleSeePackagingInfo(row)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="审核状态"
        prop="state"
        align="center"
        width="80"
        fixed
      >
        <template v-slot="{ row }">
          <template v-if="row.state === 0">
            <el-tag type="danger">未审核</el-tag>
          </template>
          <template v-if="row.state === 1">
            <el-tag type="success">初审通过</el-tag>
          </template>
          <template v-if="row.state === 2">
            <el-tag type="info">初审未通过</el-tag>
          </template>
          <template v-if="row.state === 3">
            <el-tag type="success">终审通过</el-tag>
          </template>
          <template v-if="row.state === 4">
            <el-tag type="info">终审未通过</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="品类"
        prop="category"
        align="center"
        width="100"
        fixed
        column-key="category"
        :filters="getFiltersData('category')"
        :filter-method="filterHandler"
      />
      <el-table-column
        label="型号"
        prop="computerName"
        align="center"
        width="100"
        fixed
        column-key="computerName"
        :filters="getFiltersData('computerName')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.computerName"></span>
      </el-table-column>
      <el-table-column
        label="规格书"
        prop="specification"
        align="center"
        width="100"
        fixed
      >
        <template slot-scope="{ row }">
          <preview-img
            width="60px"
            height="60px"
            :isDisBadge="false"
            :url="row.specification"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="客户"
        prop="customerName"
        align="center"
        width="100"
        fixed
        column-key="customerName"
        :filters="getFiltersData('customerName')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.customerName"></span>
      </el-table-column>
      <el-table-column
        label="客户料号"
        prop="customerMaterialNum"
        align="center"
        width="100"
        fixed
        column-key="customerMaterialNum"
        :filters="getFiltersData('customerMaterialNum')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.customerMaterialNum" />
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc"
        align="center"
        width="120"
        show-overflow-tooltip
      >
        <span slot-scope="scope" v-NoData="scope.row.desc"></span>
      </el-table-column>
      <el-table-column label="SN" prop="sn" align="center" width="120">
        <span slot-scope="scope" v-NoData="scope.row.sn"></span>
      </el-table-column>
      <el-table-column label="pcbaSn" prop="pcbaSn" align="center" width="120">
        <span slot-scope="scope" v-NoData="scope.row.pcbaSn"></span>
      </el-table-column>
      <el-table-column
        label="实际客户车名"
        prop="customerCarName"
        align="center"
        width="150"
        column-key="customerCarName"
        :filters="getFiltersData('customerCarName')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.customerCarName"></span>
      </el-table-column>
      <el-table-column
        label="车名"
        prop="ebikeName"
        align="center"
        width="150"
        column-key="ebikeName"
        :filters="handleDataFilter(dicts_ebike)"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="dicts_ebike[scope.row.ebikeName]" />
      </el-table-column>
      <el-table-column
        label="客户车型编码"
        prop="carModel"
        align="center"
        width="150"
        column-key="carModel"
        :filters="getFiltersData('carModel')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.carModel" />
      </el-table-column>
      <el-table-column
        label="控制器接头"
        prop="controlConnect"
        align="center"
        width="120"
        column-key="controlConnect"
        :filters="getFiltersData('controlConnect')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.controlConnect" />
      </el-table-column>
      <el-table-column
        label="不含头控制器出线线长(mm)"
        align="center"
        width="200"
        prop="notControllerJointString"
        column-key="notControllerJointString"
        :filters="getFiltersData('notControllerJointString')"
        :filter-method="filterHandler"
      >
        <template slot-scope="{ row }">
          <span class="text-green" v-if="row.controlHead === 1">（含头）</span>

          <p>
            <span v-NoData="row.notControllerJointString"></span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="按键【仪表端】接头"
        align="center"
        prop="modelEndHead"
        width="160"
        column-key="modelEndHead"
        :filters="getFiltersData('modelEndHead')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.modelEndHead"></span>
      </el-table-column>
      <el-table-column
        label="按键【按键端】接头"
        align="center"
        prop="keyEndHead"
        width="160"
        column-key="keyEndHead"
        :filters="getFiltersData('keyEndHead')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.keyEndHead"></span>
      </el-table-column>
      <el-table-column
        label="通讯协议"
        prop="sysProtocol"
        align="center"
        width="120"
        column-key="sysProtocol"
        :filters="handleDataFilter(dicts_protocol_list)"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="{ row }"
          v-NoData="dicts_protocol_list[row.sysProtocol]"
        />
      </el-table-column>

      <el-table-column
        label="通讯方式"
        prop="serialLevel"
        align="center"
        width="120"
        column-key="serialLevel"
        :filters="handleDataFilter(serialLevelData)"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="{ row }"
          v-NoData="serialLevelData[row.serialLevel]"
        />
      </el-table-column>

      <el-table-column
        label="串口波特率"
        prop="baudRate"
        align="center"
        width="120"
        column-key="baudRate"
        :filters="handleDataFilter(baudRateList)"
        :filter-method="filterHandler"
      >
        <span slot-scope="{ row }" v-NoData="baudRateList[row.baudRate]" />
      </el-table-column>

      <el-table-column
        label="CAN波特率"
        prop="canRate"
        align="center"
        width="120"
        column-key="canRate"
        :filters="handleDataFilter(canRateList)"
        :filter-method="filterHandler"
      >
        <template slot-scope="{ row }">
          <span
            v-if="row.serialLevel === 2"
            v-NoData="canRateList[row.canRate]"
          />
          <span v-else>- - -</span>
        </template>
      </el-table-column>

      <el-table-column
        label="帧类型"
        prop="msgType"
        align="center"
        width="120"
        column-key="msgType"
        :filters="handleDataFilter(msgTypeData)"
        :filter-method="filterHandler"
      >
        <template slot-scope="{ row }">
          <span
            v-if="row.serialLevel === 2"
            v-NoData="msgTypeData[row.msgType]"
          />
          <span v-else>- - -</span>
        </template>
      </el-table-column>

      <el-table-column
        label="按键型号"
        prop="keyType"
        align="center"
        width="120"
        column-key="keyType"
        :filters="handleDataFilter(dicts_keyType_list)"
        :filter-method="filterHandler"
      >
        <span slot-scope="{ row }" v-NoData="dicts_keyType_list[row.keyType]" />
      </el-table-column>
      <el-table-column
        label="按键线长(mm)"
        prop="keyLineLen"
        align="center"
        width="120"
        column-key="keyLineLen"
        :filters="getFiltersData('keyLineLen')"
        :filter-method="filterHandler"
      >
        <template slot-scope="{ row }">
          <span class="text-green" v-if="row.keyLineType === 1">（含头）</span>
          <p>
            <span v-NoData="row.keyLineLen"></span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="按键图片"
        prop="keyImgUrl"
        align="center"
        width="120"
      >
        <template slot-scope="{ row }">
          <preview-img width="60px" height="60px" :url="row.keyImgUrl" />
        </template>
      </el-table-column>
      <el-table-column
        label="开机logo"
        prop="powerLogo"
        align="center"
        width="120"
      >
        <template slot-scope="{ row }">
          <preview-img width="60px" height="60px" :url="row.powerLogo" />
        </template>
      </el-table-column>
      <el-table-column
        label="标签规则"
        prop="labelRule"
        align="center"
        width="120"
        column-key="labelRule"
        :filters="handleDataFilter(labelRuleData)"
        :filter-method="filterHandler"
      >
        <span slot-scope="{ row }" v-NoData="labelRuleData[row.labelRule]" />
      </el-table-column>
      <el-table-column
        label="标签图片"
        prop="labelRuleImg"
        align="center"
        width="120"
      >
        <template slot-scope="{ row }">
          <preview-img width="60px" height="60px" :url="row.labelRuleImg" />
        </template>
      </el-table-column>
      <el-table-column
        label="限速范围"
        prop="speedLimitRang"
        align="center"
        width="120"
        column-key="speedLimitRang"
        :filters="getFiltersData('speedLimitRang')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.speedLimitRang"></span>
      </el-table-column>
      <el-table-column
        label="车把尺寸"
        prop="handlebarSize"
        align="center"
        width="120"
        column-key="handlebarSize"
        :filters="handleDataFilter(handlebarSizeData)"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="scope"
          v-NoData="handlebarSizeData[scope.row.handlebarSize]"
        />
      </el-table-column>
      <el-table-column
        label="配置协议"
        prop="agreement"
        align="center"
        width="120"
        column-key="agreement"
        :filters="handleDataFilter(dicts_agreement)"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="scope"
          v-NoData="dicts_agreement[scope.row.agreement]"
        />
      </el-table-column>
      <el-table-column
        label="实际协议"
        prop="showAgreement"
        align="center"
        width="120"
      />
      <el-table-column
        label="测速磁钢数"
        prop="speedSteel"
        align="center"
        width="120"
        column-key="speedSteel"
        :filters="getFiltersData('speedSteel')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.speedSteel"></span>
      </el-table-column>
      <el-table-column
        label="车轮宽度"
        prop="tiresSize"
        align="center"
        width="120"
        column-key="tiresSize"
        :filters="getFiltersData('tiresSize')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.tiresSize"></span>
      </el-table-column>
      <el-table-column
        label="助力限速门限(km/h)"
        prop="assistLimit"
        align="center"
        width="155"
        column-key="assistLimit"
        :filters="getFiltersData('assistLimit')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.assistLimit"></span>
      </el-table-column>
      <el-table-column
        label="配置轮径"
        prop="wheelDiameter"
        align="center"
        width="120"
        column-key="wheelDiameter"
        :filters="handleDataFilter(wheelDiameterData)"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="scope"
          v-NoData="wheelDiameterData[scope.row.wheelDiameter]"
        ></span>
      </el-table-column>
      <el-table-column
        label="实际轮径"
        prop="showWheelDiameter"
        align="center"
        width="120"
      />
      <el-table-column
        label="周长(mm)"
        prop="perimeter"
        align="center"
        width="120"
        column-key="perimeter"
        :filters="getFiltersData('perimeter')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.perimeter"></span>
      </el-table-column>
      <el-table-column
        label="电压"
        prop="voltage"
        align="center"
        width="120"
        column-key="voltage"
        :filters="getFiltersData('voltage')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.voltage"></span>
      </el-table-column>
      <el-table-column
        label="缓启动"
        prop="slowStart"
        align="center"
        width="120"
        column-key="slowStart"
        :filters="getFiltersData('slowStart')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.slowStart"></span>
      </el-table-column>
      <el-table-column
        label="显示单位"
        prop="unit"
        align="center"
        width="120"
        column-key="unit"
        :filters="handleDataFilter(dicts_unit)"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="dicts_unit[scope.row.unit]"></span>
      </el-table-column>
      <el-table-column
        label="电量计算"
        prop="power"
        align="center"
        width="120"
        column-key="power"
        :filters="handleDataFilter(dicts_power)"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="dicts_power[scope.row.power]"></span>
      </el-table-column>
      <el-table-column
        label="APP"
        prop="app"
        align="center"
        width="120"
        column-key="app"
        :filters="[
          { text: 'YES', value: 1 },
          { text: 'NO', value: 0 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.app)"
          slot-scope="{ row }"
          :type="row.app === 1 ? 'success' : 'danger'"
        >
          {{ row.app === 1 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="USB"
        prop="usb"
        align="center"
        width="120"
        column-key="usb"
        :filters="[
          { text: 'YES', value: 1 },
          { text: 'NO', value: 0 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.usb)"
          slot-scope="{ row }"
          :type="row.usb === 1 ? 'success' : 'danger'"
        >
          {{ row.usb === 1 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="蓝牙"
        prop="bluetooth"
        align="center"
        width="120"
        column-key="bluetooth"
        :filters="[
          { text: 'YES', value: 1 },
          { text: 'NO', value: 0 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.bluetooth)"
          slot-scope="{ row }"
          :type="row.bluetooth === 1 ? 'success' : 'danger'"
        >
          {{ row.bluetooth === 1 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="推车助力"
        prop="driveAssist"
        align="center"
        width="120"
        column-key="driveAssist"
        :filters="[
          { text: 'YES', value: 1 },
          { text: 'NO', value: 0 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.driveAssist)"
          slot-scope="{ row }"
          :type="row.driveAssist === 1 ? 'success' : 'danger'"
        >
          {{ row.driveAssist === 1 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="恢复出厂设置"
        prop="factoryReset"
        align="center"
        width="120"
        column-key="factoryReset"
        :filters="[
          { text: 'YES', value: 0 },
          { text: 'NO', value: 1 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.factoryReset)"
          slot-scope="{ row }"
          :type="row.factoryReset === 0 ? 'success' : 'danger'"
        >
          {{ row.factoryReset === 0 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="转把分档"
        prop="rotateHandle"
        align="center"
        width="120"
        column-key="rotateHandle"
        :filters="[
          { text: 'YES', value: 1 },
          { text: 'NO', value: 0 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.rotateHandle)"
          slot-scope="{ row }"
          :type="row.rotateHandle === 1 ? 'success' : 'danger'"
        >
          {{ row.rotateHandle === 1 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="助力正反"
        prop="assist"
        align="center"
        width="120"
        column-key="assist"
        :filters="[
          { text: '助力正', value: 0 },
          { text: '助力反', value: 1 },
        ]"
        :filter-method="filterHandler"
      >
        <template v-if="isShow(row.assist)" slot-scope="{ row }">
          {{ row.assist === 0 ? "助力正" : "助力反" }}
        </template>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="转把限速"
        prop="rotateHandleSpeedLimit"
        align="center"
        width="120"
        column-key="rotateHandleSpeedLimit"
        :filters="[
          { text: '正常', value: 0 },
          { text: '限速6Km', value: 1 },
        ]"
        :filter-method="filterHandler"
      >
        <template
          v-if="isShow(row.rotateHandleSpeedLimit)"
          slot-scope="{ row }"
        >
          {{ row.rotateHandleSpeedLimit === 0 ? "正常" : "限速6Km" }}
        </template>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="默认档位"
        prop="defaultGear"
        align="center"
        width="120"
        column-key="defaultGear"
        :filters="getFiltersData('defaultGear')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.defaultGear"></span>
      </el-table-column>
      <el-table-column
        label="最高档位"
        prop="topGear"
        align="center"
        width="120"
        column-key="topGear"
        :filters="getFiltersData('topGear')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.topGear"></span>
      </el-table-column>
      <el-table-column
        label="速度平滑等级"
        prop="smoothLevel"
        align="center"
        width="120"
        column-key="smoothLevel"
        :filters="getFiltersData('smoothLevel')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.smoothLevel"></span>
      </el-table-column>
      <el-table-column
        label="电量变化时间(s)"
        prop="batteryVoltageChangeTime"
        align="center"
        width="150"
        column-key="batteryVoltageChangeTime"
        :filters="getFiltersData('batteryVoltageChangeTime')"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="scope"
          v-NoData="scope.row.batteryVoltageChangeTime"
        ></span>
      </el-table-column>
      <el-table-column
        label="总线故障超时时间(s)"
        prop="allLineErrTimeOut"
        align="center"
        width="160"
        column-key="allLineErrTimeOut"
        :filters="getFiltersData('allLineErrTimeOut')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.allLineErrTimeOut"></span>
      </el-table-column>
      <el-table-column
        label="背光亮度"
        prop="backlightBrightness"
        align="center"
        width="120"
        column-key="backlightBrightness"
        :filters="handleDataFilter(backlightBrightnessList)"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="scope"
          v-NoData="backlightBrightnessList[scope.row.backlightBrightness]"
        ></span>
      </el-table-column>
      <el-table-column
        label="Logo界面"
        prop="logo"
        align="center"
        width="120"
        column-key="logo"
        :filters="handleDataFilter(dicts_logo)"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="dicts_logo[scope.row.logo]"></span>
      </el-table-column>
      <el-table-column
        label="休眠时间(min)"
        prop="sleepTime"
        align="center"
        width="120"
        column-key="sleepTime"
        :filters="getFiltersData('sleepTime')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.sleepTime"></span>
      </el-table-column>
      <el-table-column
        label="助力档位数"
        prop="powerGear"
        align="center"
        width="120"
        column-key="powerGear"
        :filters="getFiltersData('powerGear')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.powerGear"></span>
      </el-table-column>
      <el-table-column
        label="助力开始磁钢数"
        prop="assistStartMagnetNumber"
        align="center"
        width="130"
        column-key="assistStartMagnetNumber"
        :filters="getFiltersData('assistStartMagnetNumber')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.assistStartMagnetNumber" />
      </el-table-column>
      <el-table-column
        label="助力比例"
        prop="assistPercentage"
        align="center"
        width="120"
        column-key="assistPercentage"
        :filters="getFiltersData('assistPercentage')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.assistPercentage"></span>
      </el-table-column>
      <el-table-column
        label="显示轮径"
        prop="showWheelsize"
        align="center"
        width="120"
        column-key="showWheelsize"
        :filters="getFiltersData('showWheelsize')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.showWheelsize"></span>
      </el-table-column>
      <el-table-column
        label="系统电压(V)"
        prop="voltage"
        align="center"
        width="120"
        column-key="voltage"
        :filters="getFiltersData('voltage')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.voltage"></span>
      </el-table-column>
      <el-table-column
        label="限流门限(A)"
        prop="currentlimiting"
        align="center"
        width="120"
        column-key="currentlimiting"
        :filters="getFiltersData('currentlimiting')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.currentlimiting"></span>
      </el-table-column>
      <el-table-column
        label="欠压门限(V)"
        prop="undervoltage"
        align="center"
        width="120"
        column-key="undervoltage"
        :filters="getFiltersData('undervoltage')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.undervoltage"></span>
      </el-table-column>
      <el-table-column
        label="蜂鸣器"
        prop="buzzerSwitch"
        align="center"
        width="120"
        column-key="buzzerSwitch"
        :filters="[
          { text: 'YES', value: 0 },
          { text: 'NO', value: 1 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.buzzerSwitch)"
          slot-scope="{ row }"
          :type="row.buzzerSwitch === 0 ? 'success' : 'danger'"
        >
          {{ row.buzzerSwitch === 0 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="高速蜂鸣器提醒"
        prop="highSpeedBuzzerRemind"
        align="center"
        width="140"
        column-key="highSpeedBuzzerRemind"
        :filters="getFiltersData('highSpeedBuzzerRemind')"
        :filter-method="filterHandler"
      >
        <span
          slot-scope="scope"
          v-NoData="scope.row.highSpeedBuzzerRemind"
        ></span>
      </el-table-column>
      <el-table-column
        label="定速巡航功能"
        prop="cruise"
        align="center"
        width="120"
        column-key="cruise"
        :filters="[
          { text: 'YES', value: 0 },
          { text: 'NO', value: 1 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.cruise)"
          slot-scope="{ row }"
          :type="row.cruise === 0 ? 'success' : 'danger'"
        >
          {{ row.cruise === 0 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="是否开机密码"
        prop="turnOnPasswd"
        align="center"
        width="120"
        column-key="turnOnPasswd"
        :filters="[
          { text: 'YES', value: 0 },
          { text: 'NO', value: 1 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.turnOnPasswd)"
          slot-scope="{ row }"
          :type="row.turnOnPasswd === 0 ? 'success' : 'danger'"
        >
          {{ row.turnOnPasswd === 0 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="开机密码"
        prop="startupPasswd"
        align="center"
        width="120"
        column-key="startupPasswd"
        :filters="getFiltersData('startupPasswd')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.startupPasswd"></span>
      </el-table-column>
      <el-table-column
        label="是否菜单密码"
        prop="menuPassword"
        align="center"
        width="120"
        column-key="menuPassword"
        :filters="[
          { text: 'YES', value: 0 },
          { text: 'NO', value: 1 },
        ]"
        :filter-method="filterHandler"
      >
        <el-tag
          v-if="isShow(row.menuPassword)"
          slot-scope="{ row }"
          :type="row.menuPassword === 0 ? 'success' : 'danger'"
        >
          {{ row.menuPassword === 0 ? "YES" : "NO" }}
        </el-tag>
        <template v-else> - - - </template>
      </el-table-column>
      <el-table-column
        label="高级菜单密码"
        prop="highMenuPasswd"
        align="center"
        width="120"
        column-key="highMenuPasswd"
        :filters="getFiltersData('highMenuPasswd')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.highMenuPasswd"></span>
      </el-table-column>
      <el-table-column
        label="有无高级菜单"
        prop="isHighMenuPassword"
        align="center"
        width="130"
      >
        <el-tag
          v-if="isShow(row.isHighMenuPassword)"
          slot-scope="{ row }"
          :type="row.isHighMenuPassword === 0 ? 'success' : 'danger'"
        >
          {{ row.isHighMenuPassword === 0 ? "YES" : "NO" }}
        </el-tag>
      </el-table-column>
      <el-table-column
        label="电机功率(W)"
        prop="motorSys"
        align="center"
        width="120"
        column-key="motorSys"
        :filters="getFiltersData('motorSys')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.motorSys"></span>
      </el-table-column>
      <el-table-column
        label="电池容量"
        prop="batteryCap"
        align="center"
        width="120"
        column-key="batteryCap"
        :filters="getFiltersData('batteryCap')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.batteryCap"></span>
      </el-table-column>
      <el-table-column
        label="创建人"
        prop="createBy"
        align="center"
        width="120"
        column-key="createBy"
        :filters="getFiltersData('createBy')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.createBy"></span>
      </el-table-column>
      <el-table-column
        label="审核人 "
        prop="checkBy"
        align="center"
        width="120"
        column-key="checkBy"
        :filters="getFiltersData('checkBy')"
        :filter-method="filterHandler"
      >
        <span slot-scope="scope" v-NoData="scope.row.checkBy"></span>
      </el-table-column>
    </el-table>

    <el-dialog
      title="请确认是否通过"
      :visible.sync="authDialogVisible"
      width="40%"
      center
      :close-on-click-modal="false"
    >
      <el-form
        ref="authForm"
        :model="authForm"
        class="form-data"
        :inline="false"
      >
        <el-form-item label="拒审原因">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8 }"
            v-model="authForm.msg"
            placeholder="不通过则需要输入原因"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          :loading="isSubmitLoading"
          @click="handleStatusChange(isAuthFlag === 1 ? 2 : 4)"
        >
          不通过
        </el-button>
        <el-button
          type="primary"
          :loading="isSubmitLoading"
          @click="handleStatusChange(isAuthFlag === 1 ? 1 : 3)"
        >
          通过
        </el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="isDeployShow" width="50%" center top="2vh">
      <template v-slot:title>
        <div>
          <h2>车型配置详情</h2>
          <el-switch v-model="isSample" active-text="简化"> </el-switch>
        </div>
      </template>
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="背光亮度">
          <div class="flex justify-between">
            <div>
              <span
                v-NoData="
                  backlightBrightnessList[deployData.backlightBrightness]
                "
              ></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.backlightBrightness">
              </span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="缓启动" v-if="isKm5s">
          <span v-NoData="deployData.slowStart"></span>
        </el-descriptions-item>
        <el-descriptions-item label="车名" v-if="!isSample">
          <div class="flex justify-between">
            <div>
              <span v-NoData="dicts_ebike[deployData.ebikeName]"></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.ebikeName"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="车轮宽度" v-if="!isSample">
          <span v-NoData="deployData.tiresSize"></span>
        </el-descriptions-item>
        <el-descriptions-item label="休眠时间(min)">
          <span v-NoData="deployData.sleepTime"></span>
        </el-descriptions-item>
        <el-descriptions-item label="轮径">
          <div class="flex justify-between">
            <div>
              <span
                v-NoData="wheelDiameterData[deployData.wheelDiameter]"
              ></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.wheelDiameter"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="车型" v-if="!isSample">
          <span v-NoData="deployData.carModel"></span>
        </el-descriptions-item>
        <el-descriptions-item label="蓝牙">
          <div class="flex justify-between">
            <div>
              {{ deployData.bluetooth === 1 ? "YES" : "NO" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.bluetooth"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="系统电压(V)">
          <span v-NoData="deployData.voltage"></span>
        </el-descriptions-item>
        <el-descriptions-item label="周长(mm)">
          <span v-NoData="deployData.perimeter"></span>
        </el-descriptions-item>
        <el-descriptions-item label="默认档位">
          <span v-NoData="deployData.defaultGear"></span>
        </el-descriptions-item>
        <el-descriptions-item label="推车助力">
          {{ deployData.driveAssist === 1 ? "YES" : "NO" }}
        </el-descriptions-item>
        <el-descriptions-item label="欠压门限(V)">
          <span v-NoData="deployData.undervoltage"></span>
        </el-descriptions-item>
        <el-descriptions-item label="显示单位">
          <div class="flex justify-between">
            <div>
              <span v-NoData="dicts_unit[deployData.unit]"></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.unit"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="Logo界面">
          <div class="flex justify-between">
            <div>
              <span v-NoData="dicts_logo[deployData.logo]"></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.logo"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="恢复出厂设置" v-if="!isSample">
          <div class="flex justify-between">
            <div>
              {{ deployData.factoryReset === 0 ? "YES" : "NO" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.factoryReset"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="助力档位数">
          <span v-NoData="deployData.powerGear"></span>
        </el-descriptions-item>
        <el-descriptions-item label="协议">
          <div class="flex justify-between">
            <div>
              <span v-NoData="dicts_agreement[deployData.agreement]"></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.agreement"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="开机密码">
          <span v-NoData="deployData.startupPasswd"></span>
        </el-descriptions-item>
        <el-descriptions-item label="转把分档" v-if="isKm5s">
          <div class="flex justify-between">
            <div>
              {{ deployData.rotateHandle === 1 ? "YES" : "NO" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.rotateHandle"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="助力开始磁钢数" v-if="isKm5s">
          <span v-NoData="deployData.assistStartMagnetNumber"></span>
        </el-descriptions-item>
        <el-descriptions-item label="电量计算方式">
          <div class="flex justify-between">
            <div>
              <span v-NoData="dicts_power[deployData.power]"></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.power"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="高级菜单密码">
          <span v-NoData="deployData.highMenuPasswd"></span>
        </el-descriptions-item>
        <el-descriptions-item label="蜂鸣器开关" v-if="!isSample">
          <div class="flex justify-between">
            <div>
              {{ deployData.buzzerSwitch === 0 ? "YES" : "NO" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.buzzerSwitch"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="助力比例" v-if="isKm5s">
          <span v-NoData="deployData.assistPercentage"></span>
        </el-descriptions-item>
        <el-descriptions-item label="测速磁钢数">
          <span v-NoData="deployData.speedSteel"></span>
        </el-descriptions-item>
        <el-descriptions-item label="电机功率(W)">
          <span v-NoData="deployData.motorSys"></span>
        </el-descriptions-item>
        <el-descriptions-item label="定速巡航功能">
          <div class="flex justify-between">
            <div>
              {{ deployData.cruise === 0 ? "YES" : "NO" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.cruise"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="限流门限(A)">
          <span v-NoData="deployData.currentlimiting"></span>
        </el-descriptions-item>
        <el-descriptions-item label="电量变化时间(s)">
          <span v-NoData="deployData.batteryVoltageChangeTime"></span>
        </el-descriptions-item>
        <el-descriptions-item label="电池容量" v-if="!isSample">
          <span v-NoData="deployData.batteryCap"></span>
        </el-descriptions-item>
        <el-descriptions-item label="开机密码">
          <div class="flex justify-between">
            <div>
              {{ deployData.turnOnPasswd === 0 ? "YES" : "NO" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.turnOnPasswd"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="助力限速门限(km/h)">
          <span v-NoData="deployData.assistLimit"></span>
        </el-descriptions-item>
        <el-descriptions-item label="速度平滑等级" v-if="!isSample">
          <span v-NoData="deployData.smoothLevel"></span>
        </el-descriptions-item>
        <el-descriptions-item label="高速蜂鸣器提醒" v-if="!isSample">
          <span v-NoData="deployData.highSpeedBuzzerRemind"></span>
        </el-descriptions-item>
        <el-descriptions-item label="菜单密码">
          <div class="flex justify-between">
            <div>
              {{ deployData.menuPassword === 0 ? "YES" : "NO" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.menuPassword"></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="显示轮径" v-if="!isSample">
          <span v-NoData="deployData.showWheelsize"></span>
        </el-descriptions-item>
        <el-descriptions-item label="总线故障超时时间(s)">
          <span v-NoData="deployData.allLineErrTimeOut"></span>
        </el-descriptions-item>
        <el-descriptions-item label="串口通讯电平">
          <div class="flex justify-between">
            <div>
              <span
                v-NoData="serialLevelLogData[deployData.serialLevelLog]"
              ></span>
            </div>
            <div v-show="!isSample">
              实际值：
              <span
                class="text-red"
                v-NoData="deployData.serialLevelLog"
              ></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="转把限速" v-if="isKm5s">
          <div class="flex justify-between">
            <div>
              {{ deployData.rotateHandleSpeedLimit === 0 ? "正常" : "限速6Km" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span
                class="text-red"
                v-NoData="deployData.rotateHandleSpeedLimit"
              ></span>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="助力正反" v-if="isKm5s">
          <div class="flex justify-between">
            <div>
              {{ deployData.assist === 0 ? "助力正" : "助力反" }}
            </div>
            <div v-show="!isSample">
              实际值：
              <span class="text-red" v-NoData="deployData.assist"></span>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 对比 -->
    <ParamsCompare
      :isParamsCompareShow.sync="isParamsCompareShow"
      :dictList="dictList"
    />

    <PackagingInfo ref="packInfoRef" />
  </div>
</template>
  
  <script>
import { computerNameList } from "@/api/third/fileConfig";
import {
  modelTempConfigList,
  modelConfigState,
  ConfigExport,
} from "@/api/third/testApi";
import commonData from "@/mixins/commonData";
import { dragTableFn } from "@/mixins/common";
import ParamsCompare from "./ParamsCompare.vue";

export default {
  name: "ConfigOverview",
  mixins: [commonData, dragTableFn],
  components: {
    CategoryComputer: () => import("@/components/CategoryComputer"),
    ParamsCompare,
    PackagingInfo: () => import("./packagingInfo"),
  },
  data() {
    return {
      uploadIds: [],
      isDrawerFlag: false,
      isSample: false,
      isDeployShow: false,
      deployData: {},
      myCategoryId: "",
      isCLoading: false,
      authDialogVisible: false,
      isParamsCompareShow: false,
      isSubmitLoading: false,
      isAuthFlag: null,
      authForm: {},
      form: {},
      // 遮罩层
      loading: false,
      // 用户表格数据
      brandList: [],
      categoryOptions: [],
      computerOptions: [],
      // 车把尺寸
      handlebarSizeData: {},
      serialLevelLogData: {
        0: "3.3V",
        1: "5V",
      },
      labelRuleData: {
        1: "通用",
        2: "图片",
      },
      // uart波特率
      baudRateList: {},
      // can波特率
      canRateList: {},
      // 帧类型
      msgTypeData: {
        0: "标准帧",
        1: "扩展帧",
      },
      // 查询参数
      queryParams: {
        computerName: undefined,
      },
    };
  },
  computed: {
    isShow() {
      const list = [null, "null", undefined, "undefined", false, "false"];
      return (val) => {
        if (typeof val === "string") {
          return !list.includes(val.toLowerCase());
        } else {
          return !list.includes(val);
        }
      };
    },
    // 协议查询条件
    handleDataFilter() {
      return (data) => {
        return Object.entries(data)
          .map(([key, value]) => {
            return { text: value, value: +key };
          })
          .sort((a, b) => a.text - b.text);
      };
    },
    // 获取每项的筛选值
    getFiltersData() {
      return (key) => {
        let newList = [];
        let filterList = [];
        this.brandList.forEach((item) => {
          if (!this.Is_Empty(item[key]) && !filterList.includes(item[key])) {
            filterList.push(item[key]);
            newList.push({
              text: item[key],
              value: item[key],
            });
          }
        });

        return newList.sort((a, b) => a.text - b.text);
      };
    },
    isKm5s() {
      if (this.isSample) {
        return this.deployData.agreement === 0;
      } else {
        return true;
      }
    },
  },
  created() {
    // 车把尺寸
    this.getConfigDicts("handleBar_size", "handlebarSizeData");
    // uart波特率
    this.getConfigDicts("uart_baud_rate", "baudRateList");
    // can波特率
    this.getConfigDicts("can_baud_rate", "canRateList");
  },
  methods: {
    /** 查询品牌列表 */
    getList() {
      this.loading = true;
      this.brandList = [];
      modelTempConfigList(this.queryParams.computerName).then((res) => {
        this.brandList = res.data ? [res.data] : [];
      }).finally(() => {
        this.loading = false;
      })
    },
    // 每项筛选方法
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] == value;
    },
    // 清除所有过滤器
    clearFilter() {
      this.$refs.tableRef.clearFilter();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAuthChange(row, isAuthFlag) {
      this.authDialogVisible = true;
      this.authForm = row;
      this.isAuthFlag = isAuthFlag;
    },
    handleStatusChange(state) {
      const data = {};
      if (state === 2 || state === 4) {
        // 不通过 检查原因是否为空
        if (this.Is_Empty(this.authForm.msg)) {
          return this.msgError("不通过原因不能为空");
        }

        data.msg = this.authForm.msg;
      }

      data.id = this.authForm.id;
      data.state = state;
      this.isSubmitLoading = true;
      modelConfigState(data)
        .then((response) => {
          let { code } = response;
          if (code == 200) {
            this.authDialogVisible = false;
            this.msgSuccess("操作成功！");
            this.getList();
          }
        })
        .finally(() => {
          this.isSubmitLoading = false;
        });
    },
    handleOpenDetail(row) {
      this.isDeployShow = true;
      this.isSample = false;
      this.deployData = Object.assign({}, row);
    },
    handleParamsCompare() {
      this.isParamsCompareShow = true;
    },
    // 查看包装信息
    handleSeePackagingInfo(row) {
      this.$refs.packInfoRef.isDialogVisible = true;
      this.$refs.packInfoRef.packagingInfo = row.packagingInfo ?? "";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.uploadIds = selection.map((item) => item.id);
    },
    /** 导出按钮操作 */
    handleExport() {
      if (!this.uploadIds.length)
        return this.msgWarning("请选择导出的数据项！");

      this.downloadFile({
        aFn: ConfigExport,
        queryParams: this.uploadIds,
      });
    },
  },
};
</script>